/* pages/goods_detail/index.wxss */
// 1 轮播图
.detail_swiper {
  swiper {
    /* 
        1 100vw是什么意思 "100vw"通常出现在网页设计或者布局中,表示宽度为100%。这意味着元素将填充其父容器的整个宽度,直到达到视口边缘为止。 
        2 width = height : 100 view width
        */
    height: 65vw;
    // background-color: red;
    text-align: center;

    /* 
        1 固定
        2 display不可用
          display:flex;
          justify-content: center;
          align-items: center;  
        */
    // line-height: 70vw;
    /*  display:flex;
      justify-content: center;
      align-items: center; */
    swiper-item {
      image {
        width: 60%;
      }
    }
  }
}

// 2 价格
.goods_price {
  padding: 15rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: var(--themeColor);
}

// 2.1 价格 - 文字和图标
.goods_name_row {
  border-top: 5rpx solid #dedede;
  border-bottom: 5rpx solid #dedede;
  padding: 10rpx 2rpx;
  display: flex;

  .goods_name {
    flex: 5;
    color: #000;
    // background: #0094ff;
    font-size: 30rpx;
    padding: 0 10rpx;
    // 商品标题名字
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .goods_collect {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-left: 1rpx solid #000;

    .iconfont {}

    .collect_text {}
  }
}

// 3 图文详情
.goods_info {
  .goods_info_title {
    font-size: 32rpx;
    color: var(--themeColor);
    font-weight: 600;
    padding: 20rpx;
  }

  .goods_info_content {}
}



page {
  padding-bottom: 90rpx;
}

/* 
4 底部工具栏
  4.1 父容器
*/
.btm_tool {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 760rpx;
  height: 90rpx;
  background-color: antiquewhite;
  // background-color: rgba(255, 255, 255, 1);
  border-top: 1px solid #ccc;

  display: flex;
// TDL if free to R&D
  // border-radius: 20px;
  // 公共元素
  .tool_item {
    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // zoom out font size
    font-size: 24rpx;
    position: relative;

    button {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.2;
    }
  }

  // 和tool_item同层级下的类 加入购物车
  .btn_cart {
    flex: 2;

    background-color: #ffa500;
    color: #fff;
    font-size: 30rpx;
    font-weight: 600;
  }

  // 和tool_item同层级下的类 立即购买
  .btn_buy {
    flex: 2;

    background-color: var(--themeColor);
    color: #fff;
    font-size: 30rpx;
    font-weight: 600;
  }
}